<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import {ref} from 'vue';
import type {HospitalInfo} from "@/api/home/type.ts";
import {reqHospitalInfo} from "@/api/home";
import {useRouter} from "vue-router";

//收集搜索的关键字（医院的名字）
let hosname = ref<string>('');

//创建路由对象
let $router = useRouter();

//顶部组件回调
const fetchData = async (keyword: string,cb:any) => {
  //当用户输入完关键字函数会执行一次，发请求需要展示的数据即可
  let result:HospitalInfo = await reqHospitalInfo(keyword);
  //整理数据，变成人家组件需要的数据格式
  let showData = result.data.map(item=>{
    return {
      value:item.hosname,
      hoscode:item.hoscode
    }
  })
  cb(showData);
}

//点击某一个推介项
const goDetail = (item:any)=>{
  //点击推介项目跳转到详情页
  $router.push({path:'/hospital/register',query:{hoscode:item.hoscode}});
}
</script>

<template>
  <div class="search">
    <el-autocomplete @select="goDetail" clearable placeholder="请你输入医院名称" v-model="hosname" :fetch-suggestions="fetchData" :trigger-on-focus="false"/>
    <el-button type="primary" size="default" :icon="Search">搜索</el-button>
  </div>
</template>

<style scoped lang="scss">
.search{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  margin: 10px 0px;

  //深度选择器
  :deep(.el-autocomplete){
    width: 600px;
    margin-right: 10px;
  }
}
</style>
